<template>
  <div>
    <Nav/>
    <div class="bgimg">
      <img class="imgbg" src="@/assets/images/index/contentbg.png">
      <div class="contentbox">
        <div class="content1">
          <div class="titlebox" style="margin: -4px 0 0 0">
            <div class="title">Swap</div>
          </div>
          <div v-if="isShow" class="content">
            <div class="swapimgbox">
              <img src="@/assets/images/nav/eth.png">
              <div class="tip">...</div>
              <div class="text">Exchangeable quantity</div>
            </div>
          </div>
          <div v-else class="content">
            <LinkToken/>
            <div class="loading">
              <van-skeleton title :row="3"/>
            </div>
          </div>
          <div class="titlebox">
            <div class="title">ETH To USDT</div>
          </div>
          <div class="content">
            <div v-if="isShow" class="swapbox">
              <div class="from">
                <div class="imgbox">
                  <img src="@/assets/images/nav/eth.png">
                </div>
                <div>
                  <input v-model="amount">
                </div>
                <div class="all " :class="isall?'active':''" @click="click_all">
                  ALL
                </div>
              </div>

              <div class="to">
                <div class="imgbox">
                  <img src="@/assets/images/swap/usdt.png">
                </div>
                <div>
                  <input disabled v-model="toamount">
                </div>
              </div>
              <van-button type="primary" @click="submit" class="exchangebtn" size="small" :loading="loading">Exchange</van-button>
            </div>
            <div v-else class="loading">
              <van-skeleton title :row="3"/>
            </div>
          </div>
          <div class="titlebox">
            <div class="title">Swap History</div>
          </div>
          <div class="content">
            <div v-if="isShow">
              <div class="th">
                <div>Date</div>
                <div>From ETH</div>
                <div>
                  To USDT
                </div>
              </div>
              <div v-for="item in list" class="tr">
                <div>{{ item.create_time }}</div>
                <div>{{ money_format(Math.abs(item.now))}}</div>
                <div>
                  {{ money_format(item.remark) }}
                </div>
              </div>
            </div>
            <div v-else class="loading">
              <van-skeleton title :row="3"/>
            </div>
          </div>
        </div>

      </div>
      <div class="flooter">
        Copyright © 2025
        <span class="span">Liquidity Farming</span>
      </div>
    </div>
    <Tabber :tab="tab"/>
    <!--    <GetToken :showBottom="showBottom" :next="next" @close="close" @next1="next1()" @first="first()"/>-->
  </div>

</template>
<script>
import GetToken from "@/components/getToken.vue";
import Nav from "@/components/nav.vue";
import {mapState} from "vuex"
import {frySwap, frySwapRecord} from '@/api/user.js'
import {showNotify} from "vant";
import {fix2, money_format} from "@/utils/fliters.js";
import {float_format} from "@/utils/fliters.js";
import {wait} from "../../utils/fliters.js";

export default {
  data() {
    return {
      tab: 3,
      showBottom: false,
      next: false,
      amount: 0,
      toamount: 0,
      page: 1,
      list: [],
      loading: false,
      isall:false
    }
  },
  computed: {
    ...mapState('home', ['swap']),
    ...mapState('user',['token','isShow','wallet'])
  },
  watch: {
    wallet:{
      handler(val){
        if(val){
          this.amount = float_format(this.wallet.eth)
        }
      },
      immediate:true,
      deep:true
    },
    amount: {
      handler(val) {
        if (val) {
          this.toamount = val * this.swap
          if (val > this.wallet.eth) {
            this.amount = float_format(this.wallet.eth)
          }
        }
      },
      immediate: true
    },
    'token' :{
      handler(val){
        if(val){
          this.getlist()
        }
      },immediate:true
    }
  },
  components: {
    Nav,
    GetToken
  },
  mounted() {

  },
  methods: {
    fix2,
    float_format,
    money_format,
    click_all() {
      this.isall=true;
      wait(100).then(()=>{
        this.amount = float_format(this.wallet.eth)
      }).finally(()=>{
        this.isall=false
      })
    },
    getlist() {
      frySwapRecord({page: this.page}).then(res => {
        this.list = res.list;
      })
    },
    submit() {
      if (this.loading) {
        return;
      }
      if (this.amount <= 0) {
        showNotify('Please enter the  correct amount');
        return;
      }
      this.loading = true
      frySwap({
        amount: this.amount
      }).then(res => {
        showNotify({
          type: 'success',
          message: 'Submitted successfully',
          duration: 2000
        })
        this.page = 1
        this.getlist()
      }).finally(()=>{
        this.$store.dispatch('updateMemberInfo')
        this.loading = false
      })
    },
    close() {
      this.showBottom = false
    },
    next1() {
      this.next = true;
    },
    first() {
      this.next = false;
    }
  }
}
</script>
<style scoped>
.content1 .titlebox {
  padding: 20px 5px;
  position: relative;
}

.bgimg {
  position: relative;
}

.clock img {
  width: 91px;
  height: 91px;
  margin: 15px 5px;
}

.bgimg .imgbg {
  position: absolute;
  width: 100%;
  height: 35vh;
  top: 250px;
}

.contentbox {
  padding: 0 10px;
}

.titlebox {
  display: flex;
  align-items: center;
}

.titlebox .title {
  color: rgb(41 74 224);
  font-family: Josefin Sans, Serif;
  font-weight: 700;
  font-size: 28px;
}

.loginbox {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  border: 1px solid transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(22 178 242 / var(--tw-bg-opacity));
  padding: 4px 6.5px;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  margin: 15px 5px 15px 5px;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}

.img1box img {
  width: 104px;
  height: 137px;
}

.content1 .content {
  box-shadow: -10px -10px 10px 8px rgba(227, 230, 255, .25);
  padding: 20px 20px 30px 20px;
  border-radius: 32px;
  background: white;
  position: relative;
}

.loading {
  padding-top: 10px;
}

.loading .van-skeleton {
  padding: 0px;

}

.flooter {
  height: 48px;
  text-align: center;
  line-height: 48px;
  margin-top: 5px;
  padding-bottom: 50px;
  padding-top: 50px;
  background: white;
}

.flooter .span {
  color: rgb(41 74 224 / var(--tw-text-opacity));
}

.content .th {
  color: black;
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  padding: 5px;
}

.content .th div:nth-child(1) {
  flex: 1.6;
}

.content .tr div:nth-child(1) {
  flex: 1.6;
}

.content .th div:nth-child(2) {
  flex: 1;
  text-align: center;
}

.content .tr div:nth-child(2) {
  flex: 1;
  text-align: center;
}

.content .th div:nth-child(3) {
  flex: 1;
  text-align: right;
}

.content .tr div:nth-child(3) {
  flex: 1;
  text-align: right;
}

.content .tr {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  min-height: 20px;
}

.swapimgbox {
  text-align: center;

}

.swapimgbox .tip {
  font-weight: 400;
  font-size: 19.5px !important;
}

.swapimgbox .text {
  font-size: 12px !important;
  font-weight: 700;
}

.swapimgbox img {
  width: 52px;
  height: 52px;
}

.swapbox {
  padding: 10px;
}

.swapbox .from {
  display: flex;
  align-items: center;
  border: 1px solid #00000040;
}

.swapbox .from > div:nth-child(2) {
  flex: 1;
  overflow: hidden;
}

.swapbox .from > div:nth-child(3) {
  width: 53px;
  font-size: 14px;
  font-weight: 800;
  background: #fafafa;
  text-align: center;
}

.swapbox .from img {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
}

.swapbox .from > div:nth-child(2) input {
  width: calc(100% - 23px);
  border-top: 1px solid #00000020;
  border-bottom: 1px solid #00000020;
  border-left: 1px solid #00000025;
  border-right: 1px solid #00000025;
  height: 30px;
  padding: 0 10px;
}

.swapbox .imgbox {
  width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #fafafa;
}


.swapbox .to {
  margin-top: 45px;
  display: flex;
  align-items: center;
  border: 1px solid #00000040;
}

.swapbox .to > div:nth-child(2) {
  flex: 1;
  overflow: hidden;
}


.swapbox .to img {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
}

.swapbox .to > div:nth-child(2) input {
  width: calc(100% - 21px);
  border-top: 1px solid #00000020;
  border-bottom: 1px solid #00000020;
  border-left: 1px solid #00000025;
  height: 30px;
  padding: 0 10px;
}

.exchangebtn {
  background: rgb(22 178 242);
  font-size: .75rem;
  line-height: 26px;
  font-weight: 700;
  border: none;
  color: white;
  margin-top: 45px;
  width: 100%;
  border-radius: 1rem;
}
.all.active{
  height: 30px;
  line-height: 30px;
  border-radius: 1px;
  border: 1px solid #00000050;
  color: #33333350;
}
</style>
